<template>
  <div class="about-container">
    <div class="particles-background">
      <div v-for="n in 50" :key="n" class="particle"></div>
    </div>
    
    <div class="about-header">
      <h1 class="title">关于我们</h1>
      <div class="decoration">
        <div class="circle"></div>
        <div class="circle"></div>
        <div class="circle"></div>
      </div>
    </div>

    <div class="about-content">
      <section class="project-intro">
        <div class="card-content">
          <h2>项目介绍</h2>
          <p>Tech Showcase 是一个展示现代前端技术的平台。我们致力于通过直观的演示和交互式示例，帮助开发者更好地理解和掌握各种前端技术。</p>
          <div class="repository-links">
            <button @click="openLink('https://github.com/siqiongbil/technical-portal.git')" class="repo-link">
              <i class="fab fa-github"></i> GitHub
            </button>
            <button @click="openLink('https://gitee.com/zhu-bin-zhang/technical-portal.git')" class="repo-link">
              <i class="fab fa-git-alt"></i> Gitee
            </button>
          </div>
        </div>
      </section>

      <section class="tech-stack">
        <div class="card-content">
          <h2>技术栈</h2>
          <div class="tech-grid">
            <div class="tech-item" v-for="(tech, index) in techStack" :key="index">
              <i :class="tech.icon"></i>
              <span>{{ tech.name }}</span>
            </div>
          </div>
        </div>
      </section>

      <section class="contact">
        <div class="card-content">
          <h2>联系我们</h2>
          <div class="contact-info">
            <div class="contact-item" v-for="(item, index) in contactInfo" :key="index">
              <i :class="item.icon"></i>
              <span>{{ item.text }}</span>
            </div>
          </div>
        </div>
      </section>
    </div>

    <div class="background-decoration">
      <div class="circle"></div>
      <div class="circle"></div>
      <div class="circle"></div>
    </div>
  </div>
</template>

<script>
import { onMounted, ref } from 'vue'
import gsap from 'gsap'

export default {
  name: 'About',
  setup() {
    const techStack = ref([
      { icon: 'fab fa-vuejs', name: 'Vue 3' },
      { icon: 'fab fa-js', name: 'JavaScript' },
      { icon: 'fab fa-css3-alt', name: 'CSS3' },
      { icon: 'fas fa-cube', name: 'Three.js' },
      { icon: 'fas fa-code', name: 'GSAP' },
      { icon: 'fas fa-rocket', name: 'Vite' }
    ])

    const contactInfo = ref([
      { icon: 'fab fa-qq', text: '2673397594' }
    ])

    const openLink = (url) => {
      window.open(url, '_blank')
    }

    onMounted(() => {
      // 标题动画
      gsap.from('.title', {
        duration: 1,
        y: 50,
        opacity: 0,
        ease: 'power3.out'
      })

      // 内容区域动画
      gsap.from('.about-content section', {
        duration: 0.8,
        y: 30,
        opacity: 0,
        stagger: 0.2,
        ease: 'power2.out'
      })

      // 背景装饰动画
      gsap.to('.background-decoration .circle', {
        duration: 2,
        scale: 1.2,
        opacity: 0.5,
        repeat: -1,
        yoyo: true,
        ease: 'sine.inOut',
        stagger: 0.3
      })
    })

    return {
      techStack,
      contactInfo,
      openLink
    }
  }
}
</script>

<style scoped>
.about-container {
  min-height: calc(100vh - 60px - 60px);
  padding: 120px 2rem 2rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f1923 0%, #1a2a3a 100%);
  color: #fff;
}

.particles-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: #42b883;
  border-radius: 50%;
  animation: float 15s infinite linear;
  opacity: 0.5;
}

.particle:nth-child(3n) {
  width: 4px;
  height: 4px;
  animation-duration: 20s;
}

.particle:nth-child(3n + 1) {
  width: 2px;
  height: 2px;
  animation-duration: 10s;
}

.particle:nth-child(5n) {
  animation-delay: -5s;
}

.particle:nth-child(7n) {
  animation-delay: -7s;
}

@keyframes float {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.5;
  }
  90% {
    opacity: 0.5;
  }
  100% {
    transform: translateY(-100vh) translateX(100px);
    opacity: 0;
  }
}

.about-header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

.title {
  font-size: 3rem;
  color: #fff;
  margin-bottom: 1rem;
  text-shadow: 0 0 10px rgba(66, 184, 131, 0.5);
}

.decoration {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.decoration .circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #42b883;
  box-shadow: 0 0 10px #42b883;
}

.about-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 3rem;
  position: relative;
  z-index: 1;
}

section {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

h2 {
  color: #42b883;
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  text-shadow: 0 0 5px rgba(66, 184, 131, 0.3);
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}

.tech-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.tech-item i {
  font-size: 2.5rem;
  color: #42b883;
  text-shadow: 0 0 10px rgba(66, 184, 131, 0.5);
}

.contact-info {
  display: grid;
  gap: 1.5rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-item i {
  font-size: 1.5rem;
  color: #42b883;
  text-shadow: 0 0 5px rgba(66, 184, 131, 0.5);
}

.repository-links {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.repo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #42b883;
  text-decoration: none;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(66, 184, 131, 0.3);
  border-radius: 0.5rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  background: rgba(66, 184, 131, 0.05);
  font-weight: 500;
  cursor: pointer;
  border: none;
  outline: none;
}

.repo-link:hover {
  background: rgba(66, 184, 131, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(66, 184, 131, 0.2);
}

.repo-link:active {
  transform: translateY(0);
}

.repo-link i {
  font-size: 1.2rem;
  text-shadow: none;
}

.background-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.background-decoration .circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(66, 184, 131, 0.1);
  filter: blur(20px);
}

.background-decoration .circle:nth-child(1) {
  width: 300px;
  height: 300px;
  top: -100px;
  left: -100px;
}

.background-decoration .circle:nth-child(2) {
  width: 200px;
  height: 200px;
  top: 50%;
  right: -50px;
}

.background-decoration .circle:nth-child(3) {
  width: 250px;
  height: 250px;
  bottom: -100px;
  left: 50%;
}

@media (max-width: 768px) {
  .about-container {
    padding: 100px 1rem 1rem;
  }

  .title {
    font-size: 2rem;
  }

  .tech-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style> 